import React, { useCallback } from 'react'
import { getClassName } from '@UTILS/common'
import LoginVerifyBtn from './LoginVerifyBtn';
import './BottomButton.scss'

interface Props {
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  showLogin?: () => void;
  disabledVerify?: boolean;
}

const BottomButton: React.FC<Props> = ({
  children, disabled, onClick, disabledVerify = true, showLogin, loading
}) => {
  const onClickBtn = useCallback(() => {
    if (disabled || !onClick) {
      return
    }
    onClick()
  }, [disabled, onClick])
  return (
    <LoginVerifyBtn
      disabledVerify={disabledVerify}
      disabled={disabled}
      showLogin={showLogin}
      className={`${getClassName('bottom-btn')} ${disabled ? 'disabled' : ''}`}
      onClick={onClickBtn}
      loading={loading}
    >
      {children}
    </LoginVerifyBtn>
  )
}

BottomButton.defaultProps = {
  disabled: false,
  loading: false,
}

export default BottomButton
